<template>
  <div>
    <el-row class="options">
      <el-button type="primary" @click="add">添加资源</el-button>
    </el-row>
    <div class="title">视频</div>
    <div class="video-list-box">
      <div class="video-list-item" v-for="item in videoList" :key="item.id">
        <video :src="item.url" class="video-list-item-video" controls="controls">
          您的浏览器不支持视频播放
        </video>
        <div class="video-list-item-name">
          {{ item.class }}
        </div>
      </div>
    </div>
    <div class="title">图片</div>
    <div class="image-list-box">
      <div class="image-list-item" v-for="item in imageList" :key="item.id">
        <div class="image-list-item-name">
          {{ item.class }}
        </div>
        <div class="image-list-item-list">
          <img v-for="(img, index) in item.url.split(',')" :key="index" :src="img" />
        </div>
      </div>
    </div>

    <add :isShow="isShow" @close="closeDialog" @update="getList"></add>
  </div>
</template>

<script>
import { resourceList } from '@/api/modules/resource'
import add from './add.vue'
export default {
  components: {
    add
  },
  data() {
    return {
      list: [],
      videoList: [],
      imageList: [],
      isShow: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    closeDialog() {
      this.isShow = false
    },
    add() {
      this.isShow = true
    },
    getList() {
      resourceList().then(res => {
        let videoList = []
        let imageList = []
        this.list = res.data
        for (const index in this.list) {
          if (this.list[index]['type'] === 0) {
            imageList.push(this.list[index])
          } else if (this.list[index]['type'] === 1) {
            videoList.push(this.list[index])
          }
        }
        this.videoList = videoList
        this.imageList = imageList
      })
    }
  }
}
</script>

<style lang="less" scoped>
.options {
  display: flex;
  justify-content: end;
}
.title {
  font-size: 20px;
}
.video-list-box {
  margin: 20px 0;
  display: flex;
  .video-list-item {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px;
    &-video {
      width: 100%;
      height: 300px;
    }
    &-name {
      margin-top: 14px;
    }
  }
}
.image-list-box {
  .image-list-item {
    margin: 30px 14px;
    &-list {
      display: flex;
      img {
        width: 200px;
        height: 200px;
        margin-right: 30px;
      }
    }
  }
}
</style>
